<script>
    
$(document).ready(function(){
    loadImage();
    //teste();
}); 
    
   function loadImage(){
       
       /*
        *how to get the src from the img 
         var arraysOfIds = $('#main_image').find('img').map(function(){
                       return this.src;
                   }).get();
                   alert(arraysOfIds);
                   alert($('img.main_img').attr('src'));        
                  */
                 
        

        
        $('img.main_img').imgscale({
                parent : '.main_image',
                scale : 'fill',
                fade: 9000 
        });       
   }
   

    function swapImage(){
        $("#main_image").empty();
        $("#main_image").html('<img src="' + swapImage.arguments[0] + '" class="main_img" ">');
        loadImage();
     //teste();
    }
    
    function teste(){
        var img = $('#main_image').find('src')
        alert('width : ' + img.width() + ' height: ' + img.height() + ' name: ');
$('#main_image').find('img').each(function(){
            var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
            $(this).addClass(imgClass);
         alert('widht: ' + this.width + ' height: ' + this.height);
        })  
        var div_width = $('#main_image').width();
        var div_height = $('#main_image').height();
        alert ('div widht: ' + div_width + ' div height: ' + div_height);
        
        
    }
    
   /* $(window).load(function(){
        $('.main_image').find('img').each(function(){
            var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
            $(this).addClass(imgClass);
            alert('load widht: ' + this.width + 'load height: ' + this.height);
        })
    })      
    */
       
</script>    

<header>

    
    <h1><?= $hotel['name']; ?>  </h1>
    <h2><?= $hotel['hotel_resort']; ?> , <?= $hotel['hotel_destination']; ?> </h2>
    
    <p><strong>Rating</strong> <span><?= output_rating($hotel['rating'], 'star', false); ?></span></p>
    <p><strong>Address</strong> <span><?= $hotel['address'] ?></span></p>
    
</header> 

<ul class="tabs">
    <li>Details</li>
</ul>

<article>       
    
    <div class="col_images">
        
        <div class="main_image" id="main_image">
            <img src="<?= $hotel['thumbnail']; ?>" class="main_img"/>
        </div>       
        <?
        if(is_array($photos)){
        ?>

            <ul>
                <?php 
                $i=0;
                foreach($photos as $photo){
                    $i++;
                    if($i %3 == 0) {
                        $class = " class='third_thumb' ";
                    }else{
                        $class = "";
                    }
                ?>
                <li <?= $class ?> ><a href=""  onclick="swapImage('<?= $photo ?>' )"><img src="<?= $photo ?>" /></a></li>

                <? } ?>
            </ul>            
            

        <?
        }
        ?>        
    </div>
    
    <p><?= nl2br($hotel['description']); ?></p> 
    
</article>